<template>
  <div class="dialog-view" @touchmove.prevent>
    <div class="dialog-box">
      <div class="header">
        <div class="title">设置</div>
        <i class="el-icon-close" @click="closeEvent"></i>
      </div>
      <div class="content">
        <div class="my-form-item">
          <div class="left">基本信息</div>
          <div class="right">
            <el-checkbox v-model="form.checked1">开机自动启动</el-checkbox>
          </div>
        </div>
        <div class="my-form-item">
          <div class="left" style="margin-bottom: 40px">下载位置</div>
          <div class="right">
            <div class="fileUrl">
              <el-input type="url" v-model="form.fileUrl" size="mini"></el-input>
              <el-button size="mini" @click="downloadUrl">浏览</el-button>
            </div>
            <el-checkbox v-model="form.checked2">默认此路径为下载路径</el-checkbox>
          </div>
        </div>
        <div class="my-form-item">
          <div class="left" style="margin-bottom: 30px">检查更新</div>
          <div class="right">
            <div class="text" style="margin-bottom: 10px">当前版本号为: V 1.0.0.2</div>
            <div class="text">可升级最新版：V.1.0.0.2<el-button type="primary" size="mini">升级</el-button></div>
          </div>
        </div>
        <div class="my-form-item" style="margin-bottom: 0">
          <div class="left" style="margin-bottom: 30px">关于巍格</div>
          <div class="right">
            <div class="text" style="margin-bottom: 10px">最新版本号为：V 1.0.0.2 <span>查看用户协议</span></div>
            <div class="text">copyrght © 2020 巍格智能NAS</div>
          </div>
        </div>
      </div>
      <div class="footer">
        <el-button size="mini" @click="closeEvent">取消</el-button>
        <el-button type="primary" size="mini" @click="closeEvent">确定</el-button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {
        checked1: false,
        checked2: false,
        fileUrl: 'E:\baidunetdisk Downloads'
      }
    }
  },
  mounted() {
    this.stopMove()
  },
  beforeDestroy() {
    this.move()
  },
  methods: {
    closeEvent() {
      this.$emit('closeEvent')
    },
    downloadUrl() {
    },
    stopMove(){
      let m = function(e){e.preventDefault();};
      document.body.style.overflow='hidden';
      document.addEventListener("touchmove",m,{ passive:false });//禁止页面滑动
    },
    move(){
      let m =function(e){e.preventDefault();};
      document.body.style.overflow='';//出现滚动条
      document.removeEventListener("touchmove",m,{ passive:true });
    }
  }
}
</script>

<style lang="less" scoped>
.dialog-view {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  .dialog-box {
    position: relative;
    width: 568px;
    background-color: #fff;
    box-shadow: 0px 3px 10px rgb(222, 221, 221);
    border-radius: 4px;
    .header {
      height: 36px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 20px;
      background-color: #edeef3;
      .title {
        font-size: 14px;
        font-weight: bold;
        color: #152640;
      }
      i {
        font-size: 18px;
        cursor: pointer;
      }
    }
  }
  .content {
    padding: 20px 30px;
    .my-form-item{
      display: flex;
      align-items: center;
      margin-bottom: 30px;
      .left{
        font-size: 12px;
        color: #AFAFB3;
        margin-right: 40px;
      }
      .right{
        .fileUrl{
          margin-bottom: 17px;
          .el-input{
            width: 350px;
            margin-right: 12px;
          }
        }
        .text{
          font-size: 12px;
          color: #58657A;
          .el-button{
            margin-left: 10px;
          }
          span{
            color: #2E55F1;
            text-decoration: underline;
            margin-left: 10px;
            cursor: pointer;
          }
        }
      }
    }
  }
  .footer{
    width: 100%;
    display: flex;
    justify-content: flex-end;
    padding: 20px 30px;
    background-color: #fff;
  }
}
/deep/ .el-checkbox__label{
  color: #58657A !important;
  margin-left: 10px;
  font-size: 12px;
}
</style>